<template>
<!-- 展示优惠劵的 -->
  <div class="couponList">
    <!-- 优惠券单元格 -->
    <van-coupon-cell
      :coupons="coupons"
      :chosen-coupon="chosenCoupon"
      @click="showList = true"
    />
     <!-- @click="showList = true" -->
    <!-- 优惠券列表 -->
    <van-popup
      v-model="showList"
      round
      position="bottom"
      style="height: 90%; padding-top: 4px;"
    >
      <van-coupon-list
        :show-exchange-bar="false"
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        :disabled-coupons="disabledCoupons"
        @change="onChange"
        @exchange="onExchange"
      />
    </van-popup>
  </div>
</template>

<script>
// import { getDiscounts } from '@/api/discounts.js'

export default {
  name: 'couponList',
  props: {
    coupons: { // 可用优惠劵列表
      type: [Array, Object],
      required: true
    },
    disabledCoupons: { // 不可用优惠券列表
      type: [Array, Object],
      required: true
    }
  },
  data () {
    return {
      data: [{
        discounts_name: '名称',
        discounts_price: '金额',
        limit_amount: '领取限制'
      }],
      showList: false,
      chosenCoupon: -1 // 当前选中优惠券的索引
    }
  },
  created () {
    this.LoadCoupon()
  },
  mounted () {

  },
  methods: {
    LoadCoupon() {

    },
    onChange(index) {
      this.chosenCoupon = index
      this.$emit('chosenCoupon', this.chosenCoupon)
      this.$emit('showlist', false)
      this.showList = false
    },
    onExchange(code) {
      this.coupons.push(this.coupon)
      // this.$emit('showlist', false)
    }
  }
}
</script>

<style scoped lang="less">

</style>
